<template>
  <el-dialog
    title="源头企业详情"
    :visible.sync="detailDialog"
    width="1064px"
    class="dialogTitle detailDialog"
    @open="openDialogEvent"
    @closed="dialogClosed('detailForm')"
  >
    <div v-loading="loading">
      <el-form label-width="225px" ref="detailForm" :model="dialogData">
        <el-form-item label="企业名称" class="el-form-item-text" prop="enterpriseName">
          <el-input v-model="dialogData.enterpriseName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="企业类型" prop="checkList">
          <el-checkbox-group v-model="dialogData.checkList">
            <el-checkbox disabled label="国有" @change="checkboxClick('国有')"></el-checkbox>
            <el-checkbox disabled label="集体" @change="checkboxClick('集体')"></el-checkbox>
            <el-checkbox disabled label="股份制" @change="checkboxClick('股份制')"></el-checkbox>
            <el-checkbox disabled label="私营" @change="checkboxClick('私营')"></el-checkbox>
            <el-checkbox disabled label="其他" @change="checkboxClick('其他')"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="dialogData.address" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="dialogData.longitude" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="dialogData.latitude" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="货物类型" prop="goodsType">
          <el-select
            v-model="dialogData.goodsType"
            placeholder="请选择"
            clearable
            class="form-select"
            disabled
          >
            <el-option
              v-for="item in dialogData.goodsTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业法人" prop="legalPerson">
          <el-input v-model="dialogData.legalPerson" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="企业法人联系电话" prop="legalPersonPhone">
          <el-input v-model="dialogData.legalPersonPhone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运营处责任人" prop="personLiable">
          <el-input v-model="dialogData.personLiable" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运营处责任人联系方式" prop="personLiablePhone">
          <el-input v-model="dialogData.personLiablePhone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运营处责任人身份证号" prop="personLiableIDNumber">
          <el-input v-model="dialogData.personLiableIDNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="dialogData.remarks" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <span class="stepsTitle">15天内违法历史记录</span>
        <cs-steps :recordData="dialogData.recordData" @handleMoreBtnClick="handleMoreBtnClick" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import csSteps from '@/components/cs-steps/cs-steps.vue'

import { getEnterpriseDetailByID, getGoodsType } from '@/service/source_manage/enterprise_manage.js'
import { toPercentage } from '@/utils/dataConversion'

export default {
  components: {
    csSteps
  },
  data() {
    return {
      detailDialog: false,
      goodsTypeArray: [],
      getDetailStatus: false,
      tempGoodsType: '',
      checkListDefaultData: ['国有', '集体', '股份制', '私营', '其他'],
      loading: false,
      dialogData: {
        id: '',
        enterpriseName: '',
        checkList: [],
        address: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: '',
        // 货物类型
        goodsType: '',
        goodsTypeOption: [
          // {
          //   value: 0,
          //   label: '散货'
          // },
          // {
          //   value: 1,
          //   label: '集装箱'
          // },
          // {
          //   value: 2,
          //   label: '高岭土'
          // },
          // {
          //   value: 3,
          //   label: '沥青'
          // }
        ],
        // 企业法人
        legalPerson: '',
        // 企业法人联系电话
        legalPersonPhone: '',
        // 运营处责任人
        personLiable: '',
        // 责任人联系方式
        personLiablePhone: '',
        personLiableIDNumber: '',
        // 备注
        remarks: '',
        recordData: []
      }
    }
  },
  created() {
    this.$bus.$on('detailsBtnClick', (id) => {
      this.getEnterpriseDetailByID(id)
      this.detailDialog = true
    })
  },
  // watch: {
  //   goodsTypeArray(newValue) {
  //     console.log(newValue)
  //     if (newValue) {

  //     }
  //   }
  // },
  methods: {
    // 对话框打开事件
    openDialogEvent() {
      // this.getGoodsType()
    },
    // 对话框关闭事件
    dialogClosed(formName) {
      this.resetForm(formName)
      // this.$bus.$off('companyManageJunkToDetail')
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 把多选框改为单选框
    checkboxClick(res) {
      this.dialogData.checkList = [res]
    },
    // 获取货物类型
    async getGoodsType() {
      if (this.getDetailStatus) {
        const { data } = await getGoodsType()
        if (data.code === 0) {
          this.goodsTypeArray = []
          this.dialogData.goodsTypeOption = []
          data.data.forEach((item, index) => {
            this.goodsTypeArray.push(item)
            this.dialogData.goodsTypeOption.push({ value: index, label: item })
          })
          this.dialogData.goodsType = this.goodsTypeArray[this.tempGoodsType]
        }
      }
    },
    handleMoreBtnClick(id) {
      // this.$router.push({
      //   path: '/home/data_search/detail',
      //   query: {
      //     id,
      //     dataId: this.dialogData.id,
      //     fromSource: 'company'
      //   }
      // })
      this.$bus.$emit('companyManageJunkToDetail', {
        id,
        dataId: this.dialogData.id,
        fromSource: 'company'
      })
    },
    async getEnterpriseDetailByID(id, offset = 15) {
      this.loading = true
      try {
        const { data } = await getEnterpriseDetailByID({ id, offset })
        console.log(data)
        if (data.code === 0) {
          const entity = data.data.entity
          const recordVoList = data.data.recordVoList
          console.log(entity)
          console.log(recordVoList)
          // 拼接输入框数据
          this.dialogData.id = entity.id
          this.dialogData.enterpriseName = entity.name
          this.dialogData.checkList = [this.checkListDefaultData[entity.type]]
          this.dialogData.address = entity.address
          this.dialogData.longitude = entity.longitude
          this.dialogData.latitude = entity.latitude
          this.tempGoodsType = entity.goodsType
          this.dialogData.legalPerson = entity.corporate
          this.dialogData.legalPersonPhone = entity.corporatePhone
          this.dialogData.personLiable = entity.contactsName
          this.dialogData.personLiablePhone = entity.contactsPhone
          this.dialogData.personLiableIDNumber = entity.contactsIdCard
          this.dialogData.remarks = entity.remark
          // 拼接cs-steps数据
          this.dialogData.recordData = []
          recordVoList.forEach((item) => {
            // item.ratio = Number(item.ratio).toFixed(2)
            item.time = item.time.split('-')
            item.time = item.time[1] + '-' + item.time[2]
            this.dialogData.recordData.push({
              id: item.id,
              level: this.getStepType(item.overweightType),
              percent: toPercentage(item.ratio).handleNum2 + '%',
              time: item.time,
              carModel: item.siteName
            })
          })
          this.getDetailStatus = true
          this.getGoodsType()
          this.loading = false
        } else {
          this.$message.error('获取企业详情失败')
          this.loading = false
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取企业详情失败')
        this.loading = false
      }
    },
    // 判断cs-step的类型
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-left: 36px;
  margin-right: 109px;
}

.el-alert {
  background-color: #fff;
  padding: 0;
  height: 24px;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.detailDialog .el-form-item:first-child {
  margin-bottom: 0;
}

.detailDialog .el-form-item:nth-child(2) {
  margin-bottom: 0;
}

/* .detailDialog .el-form-item:nth-child(3),
.detailDialog .el-form-item:nth-child(4) {
  margin-bottom: 8px;
} */

.detailDialog .el-form-item:last-child {
  margin-bottom: 19px;
}

/* checkbox样式 */
.el-checkbox >>> .el-checkbox__inner {
  border-radius: 0;
}

.el-checkbox >>> .el-checkbox__inner::after {
  top: 0;
  left: 3px;
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  width: 4px;
}

.el-checkbox >>> .el-checkbox__label {
  color: #606266;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.form-select {
  width: 100%;
}

.selectTreeSection {
  width: 626px;
  height: 416px;
  border: 1px solid #dddddd;
  overflow: scroll;
}

.detailDialog >>> .el-dialog__title {
  color: #006eff;
}

.detailDialog >>> .el-dialog__header {
  padding: 32px 28px;
}

.detailDialog >>> .el-dialog__body {
  padding: 32px 28px 45px 28px;
}

/* 对话框关闭按钮位置 */
.detailDialog >>> .el-dialog__headerbtn {
  right: 135px;
}
/* 对话框关闭按钮大小和粗细 */
.detailDialog >>> .el-dialog__close {
  font-size: 24px;
  font-weight: 700;
}

/* 进度条标题 */
.stepsTitle {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 12px;
}

.cs-step {
  width: 100%;
}
</style>
